<template>
  <div class="person">
    名称：<input type="text" v-model="person.name" />
    <br />
    型号1：<input type="text" v-model="person.title1" />
    <br />
    型号2：<input type="text" v-model="person.title2" />
    <div>全名：{{ fullname }}</div>
    <div>全名2：{{ fullname2 }}</div>
    <button @click="number++">数量+</button>
    <button @click="changeFullname2">修改computed</button>
  </div>
</template>

<script setup lang="ts" name="PersonComponent">
import { reactive, computed, ref } from 'vue';
let person = reactive({ name: '奔驰1', title1: 'c260', title2: 'L' });
let number = ref(1);
let fullname = computed(() => {
  return (
    number.value +
    person.name +
    person.title1.slice(0, 1).toUpperCase() +
    person.title1.slice(1) +
    person.title2
  );
});
let fullname2 = computed({
  get(): string {
    return person.name + person.title1 + person.title2;
  },

  set(v: string) {
    console.log(v);
    person.name = v.slice(0, 2);
    person.title1 = v.slice(2)
    person.title2 = "666"
  },
});

// 这样不能改呢
const changeFullname = () => {
  fullname.value = '哈利波特';
};
// 除非重新定义fullname
const changeFullname2 = () => {
  // 触发set
  fullname2.value = '哈利波特';
  console.log(fullname2);
};
</script>

<style scoped>
.person {
  color: red;
}
ul li {
  font-size: 20px;
}
</style>
